<template>
    <div>
        <h1>这是一个动态组件</h1>

        <!-- 所有选项卡头绑定同一个点击事件 -->
        <button @click="changecom('FirstCom')">选项卡一</button>
        <button @click="changecom('SecondCom')">选项卡二</button>
        <button @click="changecom('ThirdCom')">选项卡三</button>

        <!-- 设置挂载点 -->
        <component :is="comid"></component>
    </div>
</template>

<script>
    import FirstCom from "@/components/zhangyifan/FirstCom.vue"
    import SecondCom from "@/components/zhangyifan/SecondCom.vue"
    import ThirdCom from "@/components/zhangyifan/ThirdCom.vue"
export default {
    components:{
        FirstCom,SecondCom,ThirdCom
    },
    data(){
        return{
            comid:FirstCom
        }
    },
    methods: {
        changecom(val){
            this.comid=val
        }
    },
}
</script>

<style>

</style>